var cArea = $('#ele');  // 最外层容器
var drag = $('.drag');  // 拖拽区域
var cAreaH; //容器高度
var cAreaW;  // 容器宽度
//标尺尺寸
var rulerSize = 30;
//左侧工具栏尺寸
var leftUtilsSize = $('.leftUtils').innerWidth();
var cAreaTop = getPosition(cArea).Y - rulerSize; // 容器距离浏览器上边界距离
var cAreaLeft = getPosition(cArea).X - rulerSize - leftUtilsSize; // 容器距离浏览器左边界距离
var currentEle = null; // 缓存当前拖动的元素
var clickEle = [];  //缓存当前选中元素
var mousePosition, mouseStartX, mouseStartY, dragLeft, dragTop, dragMaxH, dragMaxW;  // 定义按下鼠标产生的变量

//画布大小   宽8.5英寸   高5.5英寸
var areaWidthIn = 8.5;
var areaHeightIn = 5.5;

var movePx = 3;  //全局移动点

var isCopy = false;

var isLockScreen = true;

var isDialog = false;

//设置层级关系
var zindex = 999;


function initFun() {
    $('body').on('mousedown', '.drag', startDrag);
    //元素点击
    $('body').on('click', '.drag', dragControlSize);
    //body下点击   （空白区）
    $('body').on('click', '#ele', remoreAllControlSize);
    $('body').on('dblclick', '.drag', changeImg);
    $('body').on('change', '#fontColor', setFontColor);
    $('body').on('change', '#bgColor', setBgColor);
    $('body').on('click', '.fontDialogClose', fontDragDialog);
    $('body').on('click', '.fontDialogTrue', trueTextDragDialog);
    $('body').on('keyup', '.textarea', textareaKeyUp);
}

$(document).keydown(function (e) {
    if(isDialog){
        return;
    }
    var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    if (clickEle.length > 0) {
        //判断是否是选中文本
        var textareaEle = $(clickEle).children('.textarea');
        var isFocus = false;
        textareaEle.each(function () {
            if($(this).is(":focus")){
                isFocus = true;
                return false;
            }
        });
        if(isFocus){
            return;
        }
        if (!(textareaEle.length !== 0 && (textareaEle.is(":focus")))) {
            if (eCode === 37 && e.shiftKey) {
                $(currentEle).css('width', $(currentEle).outerWidth(true) - movePx);
                textareaAuto(currentEle);
            } else if (eCode === 39 && e.shiftKey) {
                $(currentEle).css('width', $(currentEle).outerWidth(true) + movePx);
                textareaAuto(currentEle);
            } else if (eCode === 38 && e.shiftKey) {
                $(currentEle).css('height', $(currentEle).outerHeight(true) - movePx);
                textareaAuto(currentEle);
                textareaHrNum(currentEle, $(currentEle).outerHeight(true));
            } else if (eCode === 40 && e.shiftKey) {
                textareaAuto(currentEle);
                $(currentEle).css('height', $(currentEle).outerHeight(true) + movePx);
                textareaHrNum(currentEle, $(currentEle).outerHeight(true));
            } else if ((eCode === 8 || eCode === 46)) {  //Delete键或Backspace键删除元素
                for (var i = 0; i < clickEle.length; i++) {
                    var clickEleItem = clickEle[i];
                    $(clickEleItem).remove();
                }
            } else if (eCode === 37) { //左键移动
                for (var i = 0; i < clickEle.length; i++) {
                    var clickEleItem = clickEle[i];
                    $(clickEleItem).css('left', $(clickEleItem).position().left - movePx + 'px');
                }
            } else if (eCode === 38) { //上键移动
                for (var i = 0; i < clickEle.length; i++) {
                    var clickEleItem = clickEle[i];
                    $(clickEleItem).css('top', $(clickEleItem).position().top - movePx + 'px');
                }
            } else if (eCode === 39) { //右键移动
                for (var i = 0; i < clickEle.length; i++) {
                    var clickEleItem = clickEle[i];
                    $(clickEleItem).css('left', $(clickEleItem).position().left + movePx + 'px');
                }
            } else if (eCode === 40) { //下键移动
                for (var i = 0; i < clickEle.length; i++) {
                    var clickEleItem = clickEle[i];
                    $(clickEleItem).css('top', $(clickEleItem).position().top + movePx + 'px');
                }
            } else if (eCode === 67 && e.ctrlKey) {
                isCopy = true;
            } else if (eCode === 86 && e.ctrlKey) {
                if (isCopy) {
                    for (var j = 0; j < clickEle.length; j++) {
                        var clickEleItem = clickEle[j];
                        $(clickEleItem).children('.textarea').blur();
                        setHtml($(clickEleItem), 1, j);
                    }
                }
            }
        }
    }
});

$(document).contextmenu(function () {
    return false;
})
cArea.mouseup(function (e) {
    if (e.button == 2) {
        $('.rightmouse-panel-div').remove();
        var rightMousePanel = $("<div class='rightmouse-panel-div'></div>").css("left", e.clientX).css("top", e.clientY).insertBefore(cArea);
        var leftPanel = $("<div class='panel-div-left'></div>").width(150).appendTo(rightMousePanel);
        $("<div class='wb settingMovePx'></div>").html("<span>对齐刻度</span>").appendTo(leftPanel);
        $("<div class='wb lockScreen'></div>").html("<span>锁屏/解锁</span>").appendTo(leftPanel);
        $("<div class='hr'></div>").appendTo(leftPanel);
        $("<div class='wb zindexMax'></div>").html("<span>置顶</span>").appendTo(leftPanel);
        $("<div class='wb zindexMin'></div>").html("<span>置底</span>").appendTo(leftPanel);
        $("<div class='hr'></div>").appendTo(leftPanel);
        $("<div class='wb leftAlign'></div>").html("<span>左端对齐</span>").appendTo(leftPanel);
        $("<div class='wb rightAlign'></div>").html("<span>右端对齐</span>").appendTo(leftPanel);
        $("<div class='wb topAlign'></div>").html("<span>顶端对齐</span>").appendTo(leftPanel);
        $("<div class='wb bottomAlign'></div>").html("<span>底端对齐</span>").appendTo(leftPanel);
        $("<div class='hr'></div>").appendTo(leftPanel);
        $("<div class='wb textLeft'></div>").html("<span>文本居左</span>").appendTo(leftPanel);
        $("<div class='wb textCenter'></div>").html("<span>文本居中</span>").appendTo(leftPanel);
        $("<div class='wb textRight'></div>").html("<span>文本居右</span>").appendTo(leftPanel);
        rightMousePanel.find(".wb").click(function () {
            var obj = $(this);
            if (obj.hasClass('settingMovePx')) {
                if (movePx === 3) {
                    movePx = 1;
                } else {
                    movePx = 3;
                }
            }
            if (obj.hasClass('lockScreen')) {
                isLockScreen = !isLockScreen;
            }
            if (obj.hasClass('zindexMax')) {
                zindex++;
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).css('z-index', zindex);
                }
            }
            if (obj.hasClass('zindexMin')) {
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).css('z-index', '998');
                }
            }
            if (obj.hasClass('leftAlign')) {
                var leftArr = [];
                for (var i = 0; i < clickEle.length; i++) {
                    leftArr.push(parseInt($(clickEle[i]).css('left')))
                }
                var min = Math.min.apply(null, leftArr);
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).css('left', min);
                }
            }
            if (obj.hasClass('rightAlign')) {
                setRightOrBottom('left','width')
            }
            if (obj.hasClass('topAlign')) {
                var topArr = [];
                for (var i = 0; i < clickEle.length; i++) {
                    topArr.push(parseInt($(clickEle[i]).css('top')))
                }
                var min = Math.min.apply(null, topArr);
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).css('top', min);
                }
            }
            if (obj.hasClass('bottomAlign')) {
                setRightOrBottom('top','height')
            }
            if (obj.hasClass('textLeft')) {
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).children().css('text-align', 'left')
                }
            }
            if (obj.hasClass('textCenter')) {
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).children().css('text-align', 'center')
                }
            }
            if (obj.hasClass('textRight')) {
                for (var i = 0; i < clickEle.length; i++) {
                    $(clickEle[i]).children().css('text-align', 'right')
                }
            }
            rightMousePanel.remove();
        });
    }
});

function setRightOrBottom(position,css) {
    var index = 0;
    var eleCss =  parseInt($(clickEle[0]).css(css));
    var max = parseInt($(clickEle[0]).css(position)) + eleCss;
    for (var i = 0; i < clickEle.length; i++) {
        var clickEleItem = parseInt($(clickEle[i]).css(position)) + parseInt($(clickEle[i]).css(css));
        if (clickEleItem > max) {
            max = clickEleItem;
            index = i;
            eleCss =  parseInt($(clickEle[i]).css(css));
        }
    }
    max = max - eleCss;
    var maxWidth = parseInt($(clickEle[index]).css(css));
    for (var i = 0; i < clickEle.length; i++) {
        var $clickEleItem = $(clickEle[i]);
        $clickEleItem.css(position, max- parseInt($clickEleItem.css(css))+maxWidth);
    }
}

function startDrag(e) {
    currentEle = this;
    e.stopPropagation();
    mouseStartX = e.clientX; // 按下鼠标时，相对于浏览器边界的x坐标
    mouseStartY = e.clientY;  // 按下鼠标时，相对于浏览器边界的Y坐标
    dragLeft = $(this).offset().left; // 按下鼠标时，拉伸框距离容器左部的距离
    dragTop = $(this).offset().top;  // 按下鼠标时，拉伸框距离容器顶部的距离
    dragMaxH = cAreaH - drag.height();  //垂直移动最大范围
    dragMaxW = cAreaW - drag.width() + leftUtilsSize;  // 水平移动最大范围
    mousePosition = $(e.target).attr('data-type');  // 判断按下的位置 是中间还是边上的拉伸点
    $(document).on('mousemove', dragging).on('mouseup', clearDragEvent);
}

/**
 * 监听鼠标移动
 * @param e
 */
function dragging(e) {
    e.stopPropagation();
    window.getSelection().removeAllRanges();
    switch (mousePosition) {
        case 'drag' :
            dragMove(e);
            break;
        case 'cUp' :
            upDownMove(e, 'up');
            break;
        case 'cDown' :
            upDownMove(e, 'down');
            break;
        case 'cLeft' :
            leftRightMove(e, 'left');
            break;
        case 'cRight' :
            leftRightMove(e, 'right');
            break;
        case 'cLeftUp' :
            leftRightMove(e, 'left');
            upDownMove(e, 'up');
            break;
        case 'cLeftDown' :
            leftRightMove(e, 'left');
            upDownMove(e, 'down');
            break;
        case 'cRightUp' :
            leftRightMove(e, 'right');
            upDownMove(e, 'up');
            break;
        case 'cRightDown' :
            leftRightMove(e, 'right');
            upDownMove(e, 'down');
            break;
        default :
            break;
    }
}

//全局移动
function pxFun(px) {
    return parseInt(px / movePx) * movePx;
}

/**
 * 拉伸框整体移动
 * @param e
 */
function dragMove(e) {
    if (isLockScreen) {
        var moveX = e.clientX - mouseStartX; // 拖拽中  当前坐标 - 初始坐标
        var moveY = e.clientY - mouseStartY;
        var destinationX = Math.min((moveX + dragLeft), dragMaxW); //限制拖动最大范围
        var destinationY = Math.min((moveY + dragTop), dragMaxH);
        $(currentEle).css({
            left: destinationX < 0 ? 0 : pxFun(destinationX) - rulerSize - leftUtilsSize,
            top: destinationY < 0 ? 0 : pxFun(destinationY) - rulerSize
        });
    }
}

/**
 * 元素点击事件  来控制元素尺寸控制器显示与隐藏
 * @param e
 */
function dragControlSize(e) {
    //屏蔽事件冒泡
    e.stopPropagation();
    var thisDrag = this;
    clickEle.push(thisDrag);
    //用做多选   备用
    if (!event.ctrlKey) {
        //移除非当前元素的大小控制器
        $(".drag").each(function () {
            if (thisDrag != this) {
                dragControlSizeForAll(this);
            }
        });
        clickEle = [];
        clickEle.push(this);
    }
    $(thisDrag).children('div').css('display', 'block');
}

/**
 * 移除指定元素下所有元素尺寸控制器， 实现点击一个元素，其他元素控制器隐藏
 * @param e
 */
function dragControlSizeForAll(e) {
    $(e).children('.dragDot').css('display', 'none');
}

/**
 * 移除body下元素尺寸控制器，实现点击屏幕外 ，所有控制器隐藏
 * @param e
 */
function remoreAllControlSize(e) {
    clickEle = [];
    $(this).children('.drag').children('.dragDot').css('display', 'none');
    $('.rightmouse-panel-div').remove();
}


/**
 * 鼠标松开 释放事件
 * @param e
 */
function clearDragEvent(e) {
    $(document).off('mousemove', dragging).off('mouseup', clearDragEvent);
}

/**
 * 上下方向的边框拖动
 * @param e event事件
 * @param direction  方向
 */
function upDownMove(e, direction) {
    var draggingY = e.clientY - rulerSize;
    if (draggingY < cAreaTop) draggingY = cAreaTop;  // 限制最多只能移动到容器的上下边界
    if (draggingY > cAreaTop + cAreaH) draggingY = cAreaTop + cAreaH;
    var dragY = getPosition(currentEle).Y;
    var changeHeight;
    if (direction === 'up') {
        changeHeight = dragY - draggingY;
        $(currentEle).css('top', draggingY);
    } else if (direction === 'down') {
        changeHeight = draggingY - parseFloat($(currentEle).css('height')) - dragY;
    }
    var endHeight = changeHeight + parseFloat($(currentEle).css('height'));
    $(currentEle).css('height', endHeight);
    textareaHrNum(currentEle, endHeight);
};

//多行文本显示问题
function textareaHrNum(e, endHeight) {
    //判断多行文本域
    var isNoteText = $(e).hasClass('dragNoteText') && !$(e).children().hasClass('content');
    if (isNoteText) {
        var style = $(e).find('hr').eq(0).attr('style');
        $(e).find('hr').remove();
        for (var i = 0; i < parseInt(endHeight / 11); i++) {
            $(e).append($('<hr/>').attr('style',style));
        }
    }
}

/**
 * 水平方向的边框拖动
 * @param e event
 * @param direction 方向
 */
function leftRightMove(e, direction) {
    var draggingX = e.clientX - rulerSize - leftUtilsSize;
    if (draggingX < cAreaLeft) draggingX = cAreaLeft;
    if (draggingX > cAreaLeft + cAreaW) draggingX = cAreaLeft + cAreaW;
    var dragX = getPosition(currentEle).X;
    var changeWidth;
    if (direction === 'left') {
        changeWidth = dragX - draggingX;
        $(currentEle).css('left', draggingX);
    } else if (direction === 'right') {
        changeWidth = draggingX - parseFloat($(currentEle).css('width')) - dragX;
    }
    var endWidth = changeWidth + parseFloat($(currentEle).css('width'));
    //供文本使用
    textareaAuto(currentEle);
    $(currentEle).css('width', endWidth);
};

/**
 * 获取元素距离父容器的距离
 * @param elem  容器
 */
function getPosition(elem) {
    var elemX = $(elem).position().left; // 相对于element.offsetParent节点的左边界偏移像素值
    var elemY = $(elem).position().top;  // 相对于element.offsetParent节点的上边界偏移像素值
    return {X: elemX, Y: elemY};
};


//拖拽功能
var $container = $('#ele');   //移入的容器
var $dragItem = $('.drag-item'); // 可以拖动的元素
var eleDrag = null; //当前被拖动的元素
var endPosition = {left: '', top: ''};  // 放开元素时的鼠标坐标
$dragItem.on('selectstart', function () {
    return false;
});

$dragItem.on('dragstart', function (ev) {
    // 拖拽开始
    ev.originalEvent.dataTransfer.effectAllowed = 'move';
    eleDrag = ev.target;
    return true;
}).on('dragend', function (ev) {
    eleDrag = null;
    return false;
});

$container.on('dragover', function (ev) {
    ev.preventDefault();
    return true;
}).on('dragenter', function (ev) {
    $(this).toggleClass('active');
    return true;
}).on('drop', function (ev) {
    endPosition.left = ev.originalEvent.x;
    endPosition.top = ev.originalEvent.y;
    if (eleDrag) {
        setHtml(eleDrag, 0)
    }
    $(this).toggleClass('active');
});

function setDragElePosition(eleDrag, $dragEle, type) {
    if (type === 0) {
        $dragEle.css({
            //解释算法    endPosition为距离浏览器边缘的长度    减去rulerSize是减去标尺长度
            // -2是减去边框宽度   width/2是控制鼠标在元素中心
            'left': endPosition.left - $dragEle.width() / 2 - rulerSize - 2 - leftUtilsSize,
            'top': endPosition.top - $dragEle.height() / 2 - rulerSize - 2
        });
        clickEle = [];
        clickEle.push($dragEle)
    } else {
        $dragEle.css({
            //解释算法    endPosition为距离浏览器边缘的长度    减去rulerSize是减去标尺长度
            // -2是减去边框宽度   width/2是控制鼠标在元素中心
            'left': eleDrag[0].offsetLeft + 3,
            'top': eleDrag[0].offsetTop + 3
        });
    }
}

function setHtml(eleDrag, type, index) {
    if (type === 0) {
        //元素类型   有矩形，圆角矩形，线条，圆，图片
        var eleDregType = $(eleDrag).attr('type');
        var $dragEle = $('<div>');
        var directionBtn = getHtmlForType(eleDregType);
        $(".drag").each(function () {
            dragControlSizeForAll(this);
        });
        $dragEle.css('z-index', zindex++).addClass(eleDregType).addClass("drag").attr('data-type', 'drag').attr('type', eleDregType).append(directionBtn);
        $container.append($dragEle);
        setDragElePosition(eleDrag, $dragEle, type)
        //文字创建时自动获取焦点
        $dragEle.find('.textarea').focus();
        currentEle = $dragEle;
    } else {
        var $dragEle = eleDrag.clone(true);
        clickEle[index] = $dragEle;
        $container.append($dragEle);
        setDragElePosition(eleDrag, $dragEle, type);
        dragControlSizeForAll(eleDrag);
    }
}


function getHtmlForType(eleDregType) {
    var directionBtn;
    if (eleDregType === 'dragHorizontalLine') {
        directionBtn = $('.cacheEleHorizontalLine').html();
    } else if (eleDregType === 'dragVerticalLine') {
        directionBtn = $('.cacheEleVerticalLine').html();
    } else if (eleDregType === 'dragWords') {
        directionBtn = $('.cacheEleWords').html();
    } else if (eleDregType === 'dragNoteText') {
        directionBtn = $('.cacheEleNoteText').html();
    } else if (eleDregType === 'dragImg') {
        directionBtn = $('.cacheEleImg').html();
    } else {
        directionBtn = $('.cacheEle').html();
    }
    return directionBtn;
}

//文字输入框 高度自适应事件
function textareaKeyUp() {
    $(this).parent().css('height', $(this).height());
}

//监听图片上传变化事件
function imgFileChange(e) {
    var file = $(e)[0].files[0];
    if (file != null) {
        var reader = new FileReader();
        if (/image/.test(file.type)) {//操作图像
            reader.readAsDataURL(file);
            reader.onload = function () {
                $(e).parent().css('background-image', "url(" + reader.result + ")");
            }
        }
    }
}

//双击更换图片
function changeImg() {
    $(this).parent().find('.imgFile').click();
}

function clickFontColor() {
    $('#fontColor').click();
}

function clickBgColor() {
    $('#bgColor').click();
}

function setFontColor() {
    var color = $("#fontColor").val();
    for (var i = 0; i < clickEle.length; i++) {
        var clickEleItem = clickEle[i];
        $(clickEleItem).children().css('color', color);
        $(clickEleItem).children().css('border-color', color);
        $(clickEleItem).css('border-color', color);
    }
}

function setBgColor() {
    var color = $("#bgColor").val();
    for (var i = 0; i < clickEle.length; i++) {
        var clickEleItem = clickEle[i];
        $(clickEleItem).css('background-color', color);
    }
}

function createData() {
    return {
        objtype: '', objcode: '', left: '', top: '', width: '', height: '', linewidth: '',
        text: '', autosize: '', alignment: '', fontname: '', fontsize: '', fontbold: '',
        fontitalic: '', fontcolor: '', flag: '', format: '', stretch: '', tag: '', allpwPrint: '',
        bgcolor: '', bordercolor: '', zindex: ''
    };
}

function getDate() {
    var dataList = [];
    var domList = $("#ele").children();
    domList.each(function () {
        var data = createData();
        var $this = $(this);
        //第一个class为元素类型
        data.objtype = $this.attr("class").split(' ')[0];
        data.left = $this.position().left;
        data.top = $this.position().top;
        data.width = $this.width();
        data.height = $this.height();
        data.linewidth = $this.css('border-width');
        if ($this.find('textarea').length > 0) {
            data.text = $this.find('textarea').val();
        }
        data.alignment = $this.css('text-align');
        data.fontname = $this.css('font-family');
        data.fontsize = $this.css('font-size');
        data.fontbold = $this.css('font-weight');
        data.fontitalic = $this.css('font-style');
        data.fontcolor = $this.css('color');
        data.bgcolor = $this.css('background-color');
        data.zindex = $this.css('z-index');
        dataList.push(data);
    });
    console.log(dataList);
}


function unitConversion() {
    /**
     * 获取DPI
     * @returns {Array}
     */
    this.conversion_getDPI = function () {
        var arrDPI = new Array;
        if (window.screen.deviceXDPI) {
            arrDPI[0] = window.screen.deviceXDPI;
            arrDPI[1] = window.screen.deviceYDPI;
        } else {
            var tmpNode = document.createElement("div");
            tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
            document.body.appendChild(tmpNode);
            arrDPI[0] = parseInt(tmpNode.offsetWidth);
            arrDPI[1] = parseInt(tmpNode.offsetHeight);
            tmpNode.parentNode.removeChild(tmpNode);
        }
        return arrDPI;
    };
    /**
     * px转换为mm
     * @param value
     * @param index
     * @returns {number}
     * 1英寸(in)=25.4毫米(mm)
     */
    this.pxConversionMm = function (value, index) {
        var inch = value / this.conversion_getDPI()[index];
        var c_value = inch * 25.4;
        return c_value;
    };
    /**
     * mm转换为px
     * @param value
     * @param index
     * @returns {number}
     */
    this.mmConversionPx = function (value, index) {
        var inch = value / 25.4;
        var c_value = inch * this.conversion_getDPI()[index];
        return c_value;
    }
}

function rulerHorizontalItem() {
    var $rulerHorizontal = $(".rulerHorizontal");
    $rulerHorizontal.append(' <div class="rulerHorizontalFive"><div class="rulerHorizontalSize">0</div></div>')
    var areaW = cArea.width();
    $rulerHorizontal.css('width', cArea.width() + rulerSize + 2);
    var i = 1;
    var sizeNum = 1;
    while (areaW > 0) {
        var $rulerHorizontalItem = $('<div>');
        if (i != 0 && i % 5 === 0) {
            $rulerHorizontalItem.addClass('rulerHorizontalFive');
            $rulerHorizontalItem.append($('<div>').addClass('rulerHorizontalSize').html(sizeNum));
            sizeNum++;
        } else {
            $rulerHorizontalItem.addClass('rulerHorizontalOne');
        }
        $rulerHorizontalItem.css('padding-left', new unitConversion().mmConversionPx(2, 0) - 1);

        $rulerHorizontal.append($rulerHorizontalItem);
        i++;
        areaW -= (new unitConversion().mmConversionPx(2, 0));
    }
}

function rulerVerticalItem() {
    var $rulerVertical = $(".rulerVertical");
    var areaH = cArea.height();
    $rulerVertical.css('height', cArea.height());
    $rulerVertical.append(' <div class="rulerVerticalFive" style="border: 0;"><div class="rulerVerticalSize">0</div></div>')
    var j = 1;
    var sizeNum = 1;
    while (areaH > 0) {
        var $rulerVerticalItem = $('<div>');
        if (j != 0 && j % 5 === 0) {
            $rulerVerticalItem.addClass('rulerVerticalFive');
            $rulerVerticalItem.append($('<div>').addClass('rulerVerticalSize').html(sizeNum));
            sizeNum++;
        } else {
            $rulerVerticalItem.addClass('rulerVerticalOne');
        }
        $rulerVerticalItem.css('padding-top', new unitConversion().mmConversionPx(2, 1) - 1);
        $rulerVertical.append($rulerVerticalItem);
        j++;
        areaH -= (new unitConversion().mmConversionPx(2, 1));
    }
}

//标尺
function rulerInit() {
    rulerHorizontalItem();
    rulerVerticalItem();
}

//设置画布大小
function setAreaWH() {
    var w = new unitConversion().mmConversionPx(areaWidthIn * 25.4, 0);
    var h = new unitConversion().mmConversionPx(areaHeightIn * 25.4, 1);
    $("#ele").css('width', w);
    $("#ele").css('height', h);
    $('.topUtils').css('width', w);
}

function initData() {
    cAreaH = cArea.height(); //容器高度
    cAreaW = cArea.width();  // 容器宽度
}

function setAreaWHAegin() {
    var w = $('.rulerHorizontal').width();
    var h = $('.rulerVertical').height();
    $("#ele").css('width', w - 29).css('height', h + 1).css('top', rulerSize).css('left', rulerSize + leftUtilsSize);
    $('.topUtils').css('width', w - 28);
}

function init() {
    setAreaWH();
    rulerInit();
    setAreaWHAegin();
    initData();
    initFun()
}



function fontDragDialog() {
    var isHidden = $('.font_dialog_wrapper').is(':hidden');
    if (isHidden) {
        isDialog = true;
        $('.font_dialog_wrapper').css('display', 'block');
        $('#fontfamily').val($(currentEle).css('font-family'))
        $('#fontsize').val($(currentEle).css('font-size'))
    } else {
        isDialog = false;
        $('.font_dialog_wrapper').css('display', 'none');
    }
}

function trueTextDragDialog() {
    var fontfamily = $("#fontfamily").val();
    var fontsize = $('#fontsize').val();
    for (var i = 0; i < clickEle.length; i++) {
        var clickEleItem = clickEle[i];
        $(clickEleItem).children().css('font-family', fontfamily).css('font-size',fontsize);
        $(clickEleItem).css('font-family', fontfamily).css('font-size',fontsize);
        textareaAuto(clickEleItem);
    }
    fontDragDialog();
}

function textareaAuto(e) {
    if($(e).hasClass('dragWords')){
        $(e).css('height', $(e).children('.textarea').height());
    }
}


init();
